<template>
  <el-container class="app-layout">
    <el-header class="app-header">
      <div class="header-content">
        <div class="logo" @click="$router.push('/home')">
          <div class="logo-icon">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
                </linearGradient>
                <filter id="glow">
                  <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
                  <feMerge> 
                    <feMergeNode in="coloredBlur"/>
                    <feMergeNode in="SourceGraphic"/>
                  </feMerge>
                </filter>
              </defs>
              <!-- 外圈装饰 -->
              <circle cx="20" cy="20" r="18" fill="none" stroke="url(#logoGradient)" stroke-width="1" opacity="0.3"/>
              <!-- 主圆形 -->
              <circle cx="20" cy="20" r="15" fill="url(#logoGradient)" filter="url(#glow)"/>
              <!-- 播放三角形 -->
              <path d="M14 12 L14 28 L28 20 Z" fill="#fff" stroke="#fff" stroke-width="0.5"/>
              <!-- 装饰性光点 -->
              <circle cx="10" cy="10" r="1.5" fill="#fff" opacity="0.9"/>
              <circle cx="30" cy="10" r="1" fill="#fff" opacity="0.7"/>
              <circle cx="10" cy="30" r="1" fill="#fff" opacity="0.7"/>
              <circle cx="30" cy="30" r="1.5" fill="#fff" opacity="0.9"/>
              <!-- 中心光点 -->
              <circle cx="20" cy="20" r="2" fill="#fff" opacity="0.6"/>
            </svg>
          </div>
          <span class="logo-text">腾讯视频</span>
        </div>
        
        <nav class="main-nav">
          <router-link to="/home" class="nav-link">首页</router-link>
          <router-link to="/category" class="nav-link">视频中心</router-link>
          <router-link to="/search" class="nav-link">搜索</router-link>
        </nav>

        <div class="header-actions">
          <el-input
            id="header-search"
            name="headerSearch"
            v-model="searchKeyword"
            placeholder="搜索视频..."
            size="small"
            style="width: 200px; margin-right: 10px"
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          
          <el-dropdown @command="handleCommand">
            <span class="user-menu">
              <el-avatar :size="32" style="margin-right: 8px">{{ (username || '用户').charAt(0) }}</el-avatar>
              <span>{{ username }}</span>
              <el-icon style="margin-left: 4px"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile" :icon="User">个人中心</el-dropdown-item>
                <el-dropdown-item command="logout" :icon="SwitchButton" divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <el-main class="app-main">
      <div class="content-wrapper">
        <router-view />
      </div>
    </el-main>

    <el-footer class="app-footer">
      <div class="footer-content">
        <p>&copy; 2024 腾讯视频 All Rights Reserved</p>
      </div>
    </el-footer>
  </el-container>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ElContainer, ElHeader, ElMain, ElFooter, ElInput, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon } from 'element-plus'
import { Search, User, ArrowDown, SwitchButton } from '@element-plus/icons-vue'
import authUtils from '@/utils/auth'

const router = useRouter()
const searchKeyword = ref('')

const username = computed(() => {
  const name = authUtils.getCurrentUsername()
  return name || '用户'
})

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push({
      path: '/search',
      query: { q: searchKeyword.value }
    })
  }
}

const handleCommand = (command) => {
  if (command === 'profile') {
    router.push('/user')
  } else if (command === 'logout') {
    authUtils.logout(router)
    ElMessage.success('已退出登录')
  }
}
</script>

<style scoped>
.app-layout {
  min-height: 100vh;
  width: 100vw;
  max-width: none;
  background: #ffffff;
  margin: 0;
  padding: 0;
}

.app-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  height: 60px !important;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 0 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.logo:hover .logo-icon {
  transform: rotate(5deg);
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.logo:hover .logo-text {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.main-nav {
  display: flex;
  gap: 30px;
}

.nav-link {
  color: #374151;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.nav-link:hover,
.router-link-active {
  color: #667eea;
  background: #f3f4f6;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-menu {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 20px;
  transition: background 0.3s;
}

.user-menu:hover {
  background: #f3f4f6;
}

.app-main {
  padding: 0;
  background: #ffffff;
}

.content-wrapper {
  width: 100vw;
  max-width: none;
  min-height: calc(100vh - 120px);
  padding: 0;
  margin: 0;
}

.app-footer {
  background: #1a1a1a;
  border-top: 1px solid #2a2a2a;
  height: 60px !important;
  padding: 0;
}

.footer-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

/* 响应式设计 - 优化版本 */
@media (min-width: 1920px) {
  .header-content {
    padding: 0 80px;
  }
  
  .main-nav {
    gap: 2rem;
  }
  
  .nav-link {
    padding: 10px 20px;
    font-size: 18px;
  }
  
  .logo-text {
    font-size: 24px;
  }
}

@media (min-width: 1600px) {
  .header-content {
    padding: 0 60px;
  }
  
  .main-nav {
    gap: 1.5rem;
  }
  
  .nav-link {
    padding: 8px 18px;
    font-size: 17px;
  }
  
  .logo-text {
    font-size: 22px;
  }
}

@media (min-width: 1400px) {
  .header-content {
    padding: 0 50px;
  }
  
  .main-nav {
    gap: 1.2rem;
  }
  
  .nav-link {
    padding: 8px 16px;
    font-size: 16px;
  }
  
  .logo-text {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .header-content {
    padding: 0 40px;
  }
  
  .main-nav {
    gap: 1rem;
  }
  
  .nav-link {
    padding: 6px 14px;
    font-size: 15px;
  }
  
  .logo-text {
    font-size: 19px;
  }
}

@media (min-width: 992px) {
  .header-content {
    padding: 0 30px;
  }
  
  .main-nav {
    gap: 0.8rem;
  }
  
  .nav-link {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .logo-text {
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  .header-content {
    padding: 0 25px;
  }
  
  .main-nav {
    gap: 0.6rem;
  }
  
  .nav-link {
    padding: 5px 10px;
    font-size: 13px;
  }
  
  .logo-text {
    font-size: 17px;
  }
}

@media (min-width: 576px) {
  .header-content {
    padding: 0 20px;
  }
  
  .main-nav {
    gap: 0.5rem;
  }
  
  .nav-link {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .logo-text {
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .header-content {
    padding: 0 15px;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
  
  .nav-link {
    padding: 4px 6px;
    font-size: 11px;
    min-width: auto;
  }
  
  .logo {
    order: 1;
  }
  
  .user-menu {
    order: 2;
  }
  
  .logo-text {
    font-size: 15px;
  }
  
  .logo-icon svg {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 0 12px;
    gap: 6px;
  }
  
  .main-nav {
    gap: 0.3rem;
    margin-top: 6px;
  }
  
  .nav-link {
    padding: 3px 5px;
    font-size: 10px;
  }
  
  .logo-text {
    font-size: 14px;
  }
  
  .logo-icon svg {
    width: 30px;
    height: 30px;
  }
}
</style>

